<template>
  <div class="div-main">
    <div class="div-row div-banner">
      <div class="div-top-title">
        <div class="html-logo"></div>
        <div class="user-info">
          <!-- 个人中心 -->
          <el-button round size="medium"
                     @click="_toLogin"
                     v-if="$store.state.Authentication.access_token === ''">
            登录
          </el-button>
          <personal-center-menu v-else></personal-center-menu>
        </div>
      </div>
      <!--  顶部菜单    -->
      <div class="div-top-menu">
        <div>
          <top-menu></top-menu>
        </div>
      </div>
    </div>
    <!--  内容  -->
    <div class="div-row div-content">
      <div class="div-place"></div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import TopMenu from "@/components/top-menu";
import PersonalCenterMenu from "@/components/personal-center-menu";

/**
 * {自定义模版}
 *
 * @author: 宋康
 * @date: 2023/1/31
 */
export default {
  name: "MyTemplate",
  components: {
    TopMenu,
    PersonalCenterMenu
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
$place-height: 160px;
$menu-height: 50px;
.div-main {
  width: 100%;
  position: relative;
  //padding-bottom: $place-height;
  height: 100%;
  > .div-row {
    width: 100%;

    > .div-place {
      width: 100%;
      height: $place-height;
    }
  }

  .div-banner {
    height: $place-height;
    min-width: 1400px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 19;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    > .div-top-title {
      height: $place-height - $menu-height;
      background-color: #ffffff;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;

      .html-logo {
        width: 450px;
        height: 100%;
        margin-left: 5%;
        background-image: url("~@/assets/home/logo_title.png");
        background-size: 100% 68%;
        background-repeat: no-repeat;
        background-position: center;
      }

      .user-info {
        margin-right: 5%;
      }
    }

    > .div-top-menu {
      background-color: #005aca;
      height: $menu-height;

      > div {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center
      }
    }
  }

  .div-content {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
}
</style>